<template>
    <div class="dashboard-container">
        <div class="card-container">
            <el-card class="box-card" style="margin: 20px auto; width: 800px">
                <el-form ref="form" :model="form" label-width="120px" style="height: 100%">
                    <el-form-item ref="img" label="月兑付表：" prop="imageUrl">
                        <Upload v-if="isEdit" @fileListChange="fileListChange" ref="myUpload" :drag="true" :accept="imgType" fileType="image" :filelist="myFileList" />
                        <img @click="showPreview = true" class="my-img" style="object-fit: contain" v-else :src="form.imageUrl" alt="" />
                    </el-form-item>
                    <!-- <el-form-item
            label="月兑付表："
            prop="url"
            :rules="[{ required: true, message: '内容不能为空' }]"
          >
            <el-input
              :disabled="isEdit ? false : true"
              v-model="form.url"
              placeholder="请输入链接地址"
            ></el-input>
          </el-form-item> -->
                    <el-form-item>
                        <el-button
                            v-if="!isEdit"
                            type="primary"
                            icon="el-icon-edit-outline"
                            @click="
                                () => {
                                    this.isEdit = true;
                                }
                            "
                            >编辑</el-button
                        >
                        <el-button v-else :loading="loading" type="warning" icon="el-icon-edit-outline" @click="onSubmit('form')" :disabled="!form.imageUrl">保存</el-button>
                    </el-form-item>
                    <!-- <el-form-item label="预览：">
                        <iframe class="preview-box" :src="info.url" sandbox="allow-forms allow-popups allow-scripts allow-same-origin" seamless width="375" height="600" frameborder="0"></iframe>
                    </el-form-item> -->
                </el-form>
            </el-card>
            <el-dialog :visible.sync="showPreview">
                <div class="my-img2">
                    <img @click="showPreview = true" :src="form.imageUrl" alt="" />
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    import { getDetail, update } from "@/api/monthCash";
    import Tinymce from "@/components/Tinymce";
    import { imgTypeArr } from "@/utils/enumConfig";
    import Upload from "@/components/UploadFile";

    export default {
        name: "Dashboard",
        components: {
            Upload,
        },
        data() {
            return {
                info: {},
                isEdit: false,
                loading: false,
                imgType: imgTypeArr.join(","),
                showPreview: false,
                form: {
                    imageUrl: "",
                    myFileList: [],
                },
            };
        },
        async created() {
            await this.getMonthCashDetail();
        },
        methods: {
            handleContent(val) {
                this["form"]["url"] = val;
            },
            onSubmit(formName) {
                const { validate } = this.$refs[formName];
                validate((valid) => {
                    if (valid) {
                        this._submitData({ id: this.id || 2, ...this.form });
                    }
                });
            },
            async getMonthCashDetail() {
                let data = await getDetail({ id: 2 }),
                    _this = this;
                if (data) {
                    this.info = data;
                    this.id = data.id;
                    Object.keys(_this.form).forEach((key) => {
                        if (key === "imageUrl") {
                            if (data[key]) {
                                let fileName = data[key].substring(data[key].lastIndexOf("/") + 1, data[key].length);
                                this.myFileList = [{ name: fileName, url: data[key] }];
                                _this["form"][key] = data[key];
                            }
                        }
                    });
                }
            },
            async _submitData(params) {
                this.loading = true;
                let res = await update(params);
                console.log("resres", res);
                this.loading = false;
                if (res.code === 1) {
                    this.isEdit = false;
                    await getMonthCashDetail();
                    this.$message({
                        message: "保存成功！",
                        type: "success",
                        duration: 1 * 1000,
                    });
                }
            },
            fileListChange(arr) {
                if (arr.length === 0) {
                    this["form"]["imageUrl"] = "";
                } else {
                    this["form"]["imageUrl"] = arr[0]["url"];
                    this.$refs.img.clearValidate();
                }
            },
        },
        computed: {},
    };
</script>

<style lang="scss" scoped>
    .dashboard-container {
        text-align: center;
        height: 100%;
        div::-webkit-scrollbar {
            width: 0 !important;
            display: none;
        }
        ::v-deep .el-card__body {
            height: 100%;
        }
        .card-container {
            // width: 50%;
            // margin: 60px auto 30px;
            text-align: left;
            .my-card {
                height: 80vh;
                overflow-y: auto;
                margin: 30px 80px 0;
                .content {
                    line-height: 1.5;
                    text-indent: 2em;
                }
            }
            .edit-card {
                margin: 10px 0;
            }
            .input-row {
                margin: 20px 0 0;
            }
        }
        .my-img {
            width: 400px;
            height: 400px;
            cursor: pointer;
            margin: auto;
            object-fit: cover;
        }
        .my-img2 {
            width: auto;
            height: auto;
            display: flex;
            justify-content: center;
            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }
    }
</style>
